<%--
  JSP注释：创建信息
  Created by IntelliJ IDEA.
  User: a
  Date: 2025/8/28
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 引入jQuery库 -->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">

        // 文档加载完成后执行
        $(document).ready(function () {
            //1.发送异步请求，获得集合：
            /**
             * 参数含义：
             * - "projectInfo/showdt": 请求的URL路径
             * - "indexpage="+1: 查询参数，第一页
             * - function (ph): 回调函数，ph是服务器返回的分页数据
             */
            $.get("projectInfo/showdt", "indexpage="+1, function (ph) {
                showdt(ph); // 调用显示数据的方法
            });

            //2.点击查询按钮，发送异步请求，获得集合：
            $("[value='查询']").click(function () {
                // 获取下拉框选中的值
                var val = $("select").val();
                /**
                 * 参数含义：
                 * - "projectInfo/showdt": 请求URL
                 * - {"status":val,"indexpage":1}: 请求参数对象
                 *   - status: 项目状态筛选条件
                 *   - indexpage: 页码（从第一页开始）
                 * - function (ph): 回调函数
                 */
                $.get("projectInfo/showdt", {"status":val, "indexpage":1}, function (ph) {
                    showdt(ph);
                });
            });

        });

        //3.点击分页按钮（b标签），发送异步请求,获得集合：
        /**
         * 事件委托：为动态生成的按钮绑定点击事件
         * 参数含义：
         * - "click": 事件类型
         * - "input[name]": 选择器，选择所有有name属性的input元素
         * - function(): 事件处理函数
         */
        $(document).on("click", "input[name]", function () {
            // 获取当前选择的状态值
            var val = $("select").val();
            // 获取被点击按钮的name属性值（即页码）
            var indexpage = $(this).attr("name");
            /**
             * 发送分页请求
             * 参数含义：
             * - {"status":val,"indexpage":indexpage}:
             *   - status: 保持当前筛选状态
             *   - indexpage: 要跳转的页码
             */
            $.get("projectInfo/showdt", {"status":val, "indexpage":indexpage}, function (ph) {
                showdt(ph);
            });
        });


        //重用 数据显示方法：
        /**
         * showdt函数：显示分页数据
         * 参数含义：
         * - ph: 分页数据对象，包含：
         *   - listIndex: 项目数据数组
         *   - pageIndex: 当前页码
         *   - pageCount: 总页数
         *   - dateCount: 总数据条数
         */
        function showdt(ph) {
            // 将JSON对象转换为字符串（调试用，实际可省略）
            JSON.stringify(ph);

            // 清空表格内容
            $("tbody").empty();

            // 遍历项目数据数组
            for (var i = 0; i < ph.listIndex.length; i++) {
                var str;
                // 根据状态决定显示"审核"链接还是空单元格
                if (ph.listIndex[i].status == 0) {
                    // 状态为0（已申报）显示审核链接
                    // 参数pid: 项目ID，通过URL参数传递
                    str = "<th><a href='ajaxUpdatePro.jsp?pid=" + ph.listIndex[i].pid + "'>审核</a></th>\n";
                } else {
                    // 其他状态显示空单元格
                    str = "<th></th>\n";
                }

                // 创建表格行并添加到tbody
                $("<tr>\n" +
                    "<th>" + ph.listIndex[i].pid + "</th>\n" + // 项目编号
                    "<th>" + ph.listIndex[i].pname + "</th>\n" + // 项目名称
                    "<th>" + ph.listIndex[i].startdate + "</th>\n" + // 开始时间
                    "<th>" + ph.listIndex[i].enddate + "</th>\n" + // 结束时间
                    "<th>" + ph.listIndex[i].status + "</th>\n" + // 状态
                    str + // 操作列
                    "</tr>").appendTo("tbody");
            }

            // 清空分页区域
            $("tfoot td").empty();

            // 如果不是第一页，显示首页和上一页按钮
            if (ph.pageIndex != 1) {
                // name属性存储页码值
                $("<input type='button' value='首页' name='1'>").appendTo("tfoot td");
                $("<input type='button' value='上一页' name='" + (ph.pageIndex - 1) + "'>").appendTo("tfoot td");
            }

            // 如果不是最后一页，显示下一页和尾页按钮
            if (ph.pageIndex != ph.pageCount) {
                $("<input type='button' value='下一页' name='" + (ph.pageIndex + 1) + "'>").appendTo("tfoot td");
                $("<input type='button' value='尾页' name='" + ph.pageCount + "'>").appendTo("tfoot td");
            }

            // 显示页码信息
            $("<b>第" + ph.pageIndex + "页/共" + ph.pageCount + "页</b>").appendTo("tfoot td");
        }
    </script>
</head>
<body>

<!-- 状态筛选下拉框 -->
<!-- 参数name="status": 表单字段名称 -->
申报状态<select name="status">
    <option value="-1">全部</option> <!-- value="-1": 查询所有状态 -->
    <option value="0">已申报</option> <!-- value="0": 状态为0的项目 -->
    <option value="1">审核中</option> <!-- value="1": 状态为1的项目 -->
    <option value="2">已审核</option> <!-- value="2": 状态为2的项目 -->
</select>
<input type="button" value="查询"> <!-- 查询按钮 -->

<!-- 项目列表表格 -->
<table>
    <caption>申报项目列表</caption>
    <thead>
    <tr>
        <th>项目编号</th>
        <th>项目名称</th>
        <th>项目开始时间</th>
        <th>项目结束时间</th>
        <th>项目状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody> <!-- 动态填充数据区域 -->
    <tfoot>
    <tr>
        <td colspan="6"></td> <!-- 分页控件区域 -->
    </tr>
    </tfoot>
</table>

</body>
</html>